<template>
  <div class="select-tag">
    <van-collapse v-model="activeNames" accordion>
      <van-collapse-item name="1">
        <div slot="title"><slot></slot></div>
        <van-tag
          type="primary"
          round
          v-for="(item, index) in selects"
          :key="index"
          @click="selectTag(item.id, index, item.name)"
          :plain="selected.indexOf(item.id) === -1"
          size="large">
          {{ item.name }}
        </van-tag>
      </van-collapse-item>
    </van-collapse>
  </div>
</template>

<script>
export default {
  name: 'select-tag',
  data () {
    return {
      activeNames: '',
      selected: [],
      idx: [],
      names: []
    }
  },
  methods: {
    selectTag (id, i, name) {
      if (this.multiple) {
        let index = this.selected.indexOf(id)
        if (index === -1) {
          this.selected.push(id)
          this.idx.push(i)
          this.names.push(name)
        } else {
          this.selected.splice(index, 1)
          this.idx.splice(index, 1)
          this.names.splice(index, 1)
        }
        this.$emit('getAllSelected', {idx: this.idx, names: this.names.join('、')})
      } else {
        this.selected = [id]
        this.activeNames = ''
        this.$emit('getSelected', i)
      }
    }
  },
  props: ['selects', 'multiple'],
  created () {
  }
}
</script>

<style scoped>
  .van-tag{
    margin-right: 6px;
    margin-bottom: 6px;
  }
</style>
